<template>
    <div class="price_list">
        <top-timer/>
        <p class="title center font_M font_40 col_333">价目表</p>
        <div class="list_box">
            <ul class="nav_box center flex font_36 col_666">
                <li class="flex1" @click="getClothes(index)" :class="index+1 === active?'actLi':''" v-for="(list,index) in priceList" :key="list.dataDetailId">
                    <div>{{list.dataDetailName}}</div>
                </li>
            </ul>
            <div class="clothes_list">
                <div class="overflow clothes" v-for="arr in listArr" :key="arr.clothesCategoryId">
                    <div class="fl font_36 col_666">{{arr.categoryName}}</div>
                    <div class="fr font_30">
                        <span class="font_30 vip_price">会员5折 {{arr.unitPrice/2}}元</span>
                        <span class="font_36 col_666">{{arr.unitPrice}}元</span>
                    </div>
                </div>
            </div>
        </div>
        <top-tips/>
    </div>
</template>

<script>
  export default {
    name: 'price-list',
    data() {
      return{
        active:1,
        priceList:[],
        listArr:[]
      }
    },
    created() {
      this.getClothType()
    },
    methods:{
      getClothType() {
        this.$axios.get('homeRest/findClothesType').then(res => {
          this.priceList = res.data
          this.getPriceListClothesType(1)
        })
      },
      getClothes(index) {
        this.active = index+1
        this.getPriceListClothesType(index+1)
      },
      getPriceListClothesType(type) {
        this.$axios.get('homeRest/getPriceListClothesType',{
          params:{
            clothesType:type
          }
        }).then(res => {
          this.listArr = res.data
        })
      },
    }
  };
</script>

<style lang="scss">
    .price_list {
        .title {
            margin: 0.40rem auto;
        }
        .list_box {
            padding: 0 0.40rem;
            .nav_box {
                height:1rem;
                background:rgba(237,241,246,1);
                border-radius:0.24rem 0.24rem 0rem 0rem;
                line-height: 1rem;
                box-shadow:0.04rem 0.04rem 0.20rem 0rem rgba(0,0,0,0.1);
                justify-content: space-between;
                flex-wrap: wrap;
                li {
                    display: inline-block;
                }
                .actLi{
                    color:#0A82EC;
                    div{
                        display: inline-block;
                        border-bottom:0.04rem solid #0A82EC;
                    }
                }
            }
            .clothes_list{
                padding:0 0.32rem;
                background-color: #fff;
                height:7.5rem;
                overflow-y: scroll;
                .clothes{
                    padding:0.30rem 0;
                    border-bottom:0.01rem solid #DCDCDC;
                    .vip_price{
                        color:#F56E00;
                        display: inline-block;
                        padding-right:0.20rem;
                    }
                }
            }
        }
    }
</style>
